<template>
  <div class="goods-item">
    <router-link
      :to="{ name: 'ProductDetail', params: { id: product.goodsId } }"
    >
      <img :alt="product.goodsName" :src="SERVER_URL + product.goodsPic" />
      <div class="goods-item-detail">
        <div class="lineLimit">{{ product.goodsName }}</div>
        <div class="theme-color text-right">
          <em>¥ </em> <span class="price">{{ product.goodsDiscount }}</span>
          <s
            ><span class="ori-price">{{ product.goodsPrice }}</span></s
          >
        </div>
        <div class="text-right sales">销量：{{ product.goodsSales }}件</div>
      </div>
    </router-link>
  </div>
</template>
<script>
import { SERVER_URL } from "../utils/http";
export default {
  props: ["product"],
  data() {
    return {
      SERVER_URL,
    };
  },
};
</script>
<style scoped>
.lineLimit {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  /*设置成弹性盒子 */
  display: -webkit-box;
  /*显示的个数 */
  -webkit-line-clamp: 1;
  /* 属性规定框的子元素应该被水平或垂直排列。 */
  -webkit-box-orient: vertical;
}
</style>
